<template>
<div class="treeview list-group fixed-height">
  <my-tree-item :tree="tree">
  </my-tree-item>
</div> 
</template>

<script>
import MyTreeItem from './MyTreeItem.vue'

export default {
  props: {
    tree: {
      type: Object,
      required: true
    }
  },
  components: {
    'my-tree-item': MyTreeItem
  }
}
</script>

<style>
.treeview {
  overflow-y: scroll;
  height: 600px;
}
.treeview .list-group-item {
  cursor: pointer;
}

.treeview span.indent {
  margin-left: 10px;
  margin-right: 10px;
}

.treeview span.icon {
  width: 12px;
  margin-right: 5px;
}

.treeview .node-disabled {
  color: silver;
  cursor: not-allowed;
}
</style>